import React, { PureComponent, ReactNode } from 'react'

interface IProps {
  children?: ReactNode
  addAfter?: ReactNode
  width?: number
  height?: number
  classNames?: string
}

export default class CardScroll extends PureComponent<IProps> {
  constructor(props: IProps) {
    super(props)
  }

  render() {
    const { width, height, classNames } = this.props
    const style = {
                    width:width+"px",
                    height:height+"px",
                  }
    return (
      <div className={`${classNames} w-64 h-96 bg-primary-600/[0.72] rounded backdrop-blur relative p-2 overflow-hidden z-50`} style={style}>
        <div className={"absolute top-0 left-0 w-full h-full text-white bg-gradient-to-r from-primary-600 to-secondary overflow-y-auto custom-scrollbar"}>
          {this.props.children}
        </div>
        {
          this.props.addAfter && <div className={"absolute bottom-0 left-0 w-full pr-[5px]"}>
            {this.props.addAfter}
          </div>
        }
      </div>
    )
  }
}
